<template>
    <view class="chatting-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <!-- 聊天对象 -->
        <view class="user-info">
            <view class="user-avatar">
                <image class="image"></image>
            </view>

            <view class="user-name">用户名 </view>
        </view>

        <!-- 更多操作 -->
        <view class="icon">
            <han-icon name="more_settings" size="36" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 退出页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped lang="scss">
.chatting-header {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: $han-nav-bar-height;
    // position: relative;
    border-bottom: 1rpx solid $han-global-border-color;

    .user-info {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
        margin-left: 20rpx;

        .user-avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            overflow: hidden;

            .image {
                width: 100%;
                height: 100%;
                background: #efefef;
            }
        }

        .user-name {
            margin-left: 20rpx;
            font-size: $han-font-size-base;
            font-weight: bold;
        }
    }
}
</style>
